<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
				<!-- Excel导出 -->
				<div align="center" style="font-size: 22px;">	
					<br><a href="/exportExcel" style="color:red">导出为Excel</a>
				</div>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
				
				<!-- Thymeleaf加载分页页面 -->
				<!--common/page:是子页面的文件路径 ；myfooter：是子页面中被引用代码块的名称-->
			  	<div th:replace="common/page" :: myfooter></div>
			  	
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>

<!-- 看板娘 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

<script type="text/javascript">
	//页面加载完就异步加载其他资源
 	$(function(){
 		/*ajax异步加载分页页面
 		$("#pageId").load("doPageUI",doGetObjects);
 		*/
 		
 		//Thymeleaf加载页面后数据呈现
 		doGetObjects();
 		
 		//点击事件注册
    	$(".input-group-btn")
 		.on("click",".btn-search",doQueryObjects)	//查询按钮点击事件注册
    	.on("click",".btn-delete",doDeleteObjects); //删除按钮注册点击事件
    	//全选按钮点击事件注册(一般与状态相关的事件会用change)
    	$("#checkAll").change(doChangeTableBodyCheckboxState);
 		//tbody中checkbox对象的事件注册
 		$("#tbodyId").on("change","input:checkbox",doChangeTableHeadCheckboxState);
 	});
 	
	
	
 	//基于tbody中checkbox对象的状态修改thead中checkAll对象状态
	function doChangeTableHeadCheckboxState(){
		//1.获取tbody中checkbox对象的checked属性的值并进行逻辑与操作。
 		var flag=true;
		$("#tbodyId input:checkbox")
			.each(function(){
				flag=flag&&$(this).prop("checked");
			})
		//2.修改thead中checkbox对象的值。
		$("#checkAll").prop("checked",flag);
	}
	
	//点击全选选择框后将其他选择框也选中
	function doChangeTableBodyCheckboxState(){
		//先获取全选选择框的状态是否选中
		var flag=$("#checkAll").prop("checked");
		//再把其他选择框的状态全部修改成和全选选择框的状态一样
		$("#tbodyId input:checkbox").prop("checked",flag);
	}
	
	//获取选中记录的Id并将它存为数组
	function doGetCheckedIds(){
		//定义数组
		var idArray=[];
		//获取tbody中所有的选择框并遍历
		$("#tbodyId input:checkbox")
			.each(function(){
				//获取用户选中的选择框并将其value(Id)存入数组中
				if($(this).prop("checked")){
					idArray.push($(this).val())
			}
		});
		return idArray;
	}
	
	
	//发请求进行删除操作
	function doDeleteObjects(){
		//获取选中记录的Id
		var idArray=doGetCheckedIds();
		//如果数组的值是null或者长度为0说明用户没有选中日志就点击了删除
		//给用户返回提示信息并return结束
		if(!idArray||idArray.length==0){
			alert("请先选择需要删除的日志");
			return;
		}
		if(!confirm("是否确定删除"))return;
		//将获取到的Id数组转换成字符串
		var params={"ids":idArray.toString()};
		var url="log/doDeleteObjects";
		$.post(url,params,function(result){
			if(result.state==1){
				alert(result.message);
				//删除成功后刷新页面
				doRefreshAfterDeleteOK();	
			}else{
				alert(result.message);
			}
		})
	}
	
	//删除成功后刷新页面
	function doRefreshAfterDeleteOK(){
		//执行删除操作后，获取当前页码值
		//并且checkAll的状态为选中状态
		var allChecked=$("#checkAll").prop("checked");
		var pageCurrent=$("#pageId").data("pageCurrent");
		var pageCount=$("#pageId").data("pageCount");
		console.log(pageCount);
		console.log(pageCurrent);
		//如果当前页与总页数相等并且当前页大于1时将当前页数减1后
		//再将其新值绑定到当前页码值上再进行查询
		if(allChecked&&pageCurrent==pageCount&&pageCurrent>1){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		doGetObjects();
	}
	
	//查询按钮事件处理
	function doQueryObjects(){
		$("#pageId").data("pageCurrent",1);//设置当前页码值
		//发送异步请求再次查询
		doGetObjects();
	}
	
 	//ajax异步加载日志信息
 	function doGetObjects(){
 		//每次查询前先将checkAll状态改为未选中
 		$("#checkAll").prop("checked",false);
 		//1.定义请求参数
 		var pageCurrent = $("#pageId").data("pageCurrent");
 		
		/*
			JS当中的if与java中的if有所区别
 			java中的if语句是判断某个变量的值为true或者false
 			如果这个变量的值为null则会直接报错，无法执行
 			JS中的if语句在java基础之上再添加了
 			判断值是否为null；是null则不执行，不是null则执行 
 		*/
 		
 		if(!pageCurrent)pageCurrent=1;
 		var params={"pageCurrent":pageCurrent};
 		//获取用户输入的用户名
 		var uname=$("#searchNameId").val();
 		//如果uname的值不为空就代表用户输入了用户名进行查询
 		//再把uname的值绑定到params中一起发送给服务端
 		if(uname)params.username=uname;
 		//2.定义请求url
 		var url="log/doFindPageObjects";
 		//3.发送请求
 		$.getJSON(url,params,doHandleQueryResponseResult);//$.getJSON也是ajax函数,代表从服务端返回的数据为JSON格式
 	}
 	
 	function doHandleQueryResponseResult(result){
 		if(result.state==1){	//state为我们自己定义的，如果是1就代表中途没有出错，并且有返回值
 			doSetTableBodyRows(result.data.records);	//没出错就将查询出来的结果传给doSetTableBodyRows这个函数
 			doSetPagination(result.data);
 		}else{
 			//方法1:简单粗暴，直接给用户弹窗错误信息
 			//alert(result.message);	//如果不为1，就是中途出了某些错误，给客户端弹窗错误信息
 			//方法2:
 			doHandleQueryError(result.message);
 		}
 	}
 	
 	//查询失败后给客户端返回提示信息
 	function doHandleQueryError(msg){
 		//将服务端返回的信息添加到页面上
 		$("#tbodyId").html(`<tr><td colspan="7">${msg}</td></tr>`);
 		//将全选选择框状态改为未选中
 		$("#checkAll").prop("checked",false);
 		//1.初始化总记录数;
 	    $(".rowCount").html("总记录数(0)");
 	    //2.初始化总页数
 	    $(".pageCount").html("总页数(0)");
 	    //3.初始化当前页码值
 	    $(".pageCurrent").html("当前页(1)");
 	}
 	
 	
 	function doSetTableBodyRows(records){
 		//1.先获取tbody对象并清空原有内容
 		var tBody=$("#tbodyId");
 		tBody.empty();
 		//2.迭代result.data里的内容并将它追加到tbody中
 		records.forEach((item)=>tBody.append(doCreateRows(item)));	//item为自己定义
 		//	=>  箭头号左边的为需要遍历的数组，右边为遍历后要执行的什么操作
 	}
 	
 	function doCreateRows(item){
 		return `<tr>
 					<td><input type='checkbox' value=${item.id}></td>
 					<td>${item.username}</td>
 					<td>${item.operation}</td>
 					<td>${item.method}</td>
 					<td>${item.params}</td>
 					<td>${item.ip}</td>
 					<td>${item.time}ms</td>
 				</tr>`
 	}
</script>






